<!--
 * @Description: 第七章 认识Reactive全家桶 readonly
 * @Author: IA ia@kepro.space
 * @Date: 2025-02-11 11:18:12
-->
<template>
  <div>
    <p>Readonly</p>
    <div>
      <p>basic_obj: {{ basic_obj }}</p>
      <p>readonly_basic_obj: {{ readonly_basic_obj }}</p>
      <button @click="readonly_basic_obj_show">为readonly_basic_obj赋值</button>
      <p>readonly无法自行赋值，但受源值影响</p>
      <button @click="basic_obj_show">为basic_obj赋值</button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, readonly } from 'vue'
let basic_obj = reactive({
  name: 'IA',
})
const readonly_basic_obj = readonly(basic_obj)
// 只读，无法赋值
readonly_basic_obj.name = 'NOT IA'

const basic_obj_show = () => {
  basic_obj.name = 'click to change basic_obj.name'
  console.log('basic_obj: ', basic_obj)
}

const readonly_basic_obj_show = () => {
  readonly_basic_obj.name = 'click to change readonly_basic_obj.name'
  console.log('readonly_basic_obj: ', readonly_basic_obj)
}
</script>
<style scoped>
hr {
  margin: 10px 0;
}
</style>
